<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-侧边栏菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 85px;
            height: 100%;
            border: 1px solid #000;
        }
        .box>ul{
            list-style: none;
            width: 100%;
            position: relative;
        }
        .box>ul>li{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid #666;
        }
        .box>ul>li:last-child{
            border-bottom: none;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>热门推荐</li>
        <li>指趣学院</li>
        <li>手机数码</li>
        <li>家用电脑</li>
        <li>电脑办公</li>
        <li>计生情趣</li>
        <li>美妆护肤</li>
        <li>个护清洁</li>
        <li>汽车用品</li>
        <li>京东超市</li>
        <li>男装</li>
        <li>男鞋</li>
        <li>女装</li>
        <li>女鞋</li>
        <li>母婴童装</li>
        <li>图书音像</li>
        <li>运动户外</li>
        <li>内衣配饰</li>
        <li>食品生鲜</li>
        <li>酒水饮料</li>
        <li>家具家装</li>
        <li>箱包手袋</li>
        <li>钟表珠宝</li>
        <li>玩具乐器</li>
        <li>医疗保健</li>
        <li>宠物生活</li>
        <li>礼品鲜花</li>
        <li>生活旅行</li>
        <li>奢侈品</li>
        <li>艺术邮币</li>
        <li>二手商品</li>
    </ul>
</div>
<script>
    // 1.拿到需要操作的元素
    let oDiv = document.querySelector("div");
    let oUl = document.querySelector("ul");
    let startY = 0;
    let offsetY = 0;
    let currentY = 0;
    let maxOffsetY = 0;
    let minOffsetY = oDiv.offsetHeight - oUl.offsetHeight;
    // 2.监听手指按下和移动的事件
    oDiv.ontouchstart = function (event) {
        // 保存手指按下的位置
        startY = event.targetTouches[0].clientY;
    }
    oDiv.ontouchmove = function (event) {
        // 拿到手指移动之后的位置
        let moveY = event.targetTouches[0].clientY;
        // 计算手指移动的偏移位
        offsetY = moveY - startY;
        // 判断有没有超出极限值
        if((currentY + offsetY) >= (maxOffsetY + 100)){
            return;
        }else if((currentY + offsetY) <= (minOffsetY - 100)){
            return;
        }
        // 让UL移动
        oUl.style.top = currentY + offsetY + "px";
    }
    oDiv.ontouchend = function (event) {
        // 保存已经移动出去的偏移位
        currentY += offsetY;
        // 判断有没有超出顶部的范围
        if(currentY > maxOffsetY){
            // console.log("超出范围了");
            currentY = maxOffsetY;
            oUl.style.top = maxOffsetY + "px";
        }
        // 判断有没有超出底部的范围
        else if(currentY < minOffsetY){
            // console.log("超出范围了");
            currentY = minOffsetY;
            oUl.style.top = minOffsetY + "px";
        }
    }
</script>
</body>
</html>